<template>
	<view class="flex flex-column flex-1">
		<view class="form-title">
			<text>CEMS校验测试记录</text>
		</view>
			<view class="user-form">
				<view class="user-form-item">
					<view class="form-label">企业名称</view><view class="form-input"><input class="form-input" v-model="form.key1"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">校准日期</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
						    showType="date"
							@btnConfirm="(e)=>dateChange(e,'key2')" 
						>
						    <text v-if="form.key2">{{form.key2}}</text>
							<text v-else style="color: grey;">请选择日期</text>
						</TimeSelector>
					</view>
				</view>
				<view class="user-form-item"><view class="form-label">CEMS供应商</view><view class="form-input"><input class="form-input" v-model="form.key3"></view></view>
				<!-- 折叠 -->
				<uni-collapse accordion="true">
					<uni-collapse-item title="CEMS主要仪器型号" :open="false" class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">仪器名称</div>
									<div class="loop-form-table-item">设备型号</div>
									<div class="loop-form-table-item">制造商</div>
									<div class="loop-form-table-item">测试项目</div>
									<div class="loop-form-table-item">测量原理</div>
								</div>
								<!-- 行数 -->
								<template v-for="(n,i) in 3">
									<div class="loop-form-table-row" :key="i">
										<div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(5*i)+1)]"/></div>
										<div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(5*i)+2)]"/></div>
										<div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(5*i)+3)]"/></div>
										<div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(5*i)+4)]"/></div>
										<div class="loop-form-table-item"><input class="form-input" v-model="form['key'+(3+(5*i)+5)]"/></div>
									</div>
								</template>
							</div>
						</div>
						<view class="user-form-item"><view class="form-label">安装地点</view><view class="form-input"><input class="form-input" v-model="form.key19"></view></view>
						<view class="user-form-item"><view class="form-label">维护管理单位</view><view class="form-input"><input class="form-input" v-model="form.key20"></view></view>
						<view class="user-form-item">
							<view class="form-label">本次校验日期</view>
							<view class="form-input">
								<TimeSelector
									class="form-ipt"
								    showType="date"
									@btnConfirm="(e)=>dateChange(e,'key21')" 
								>
								    <text v-if="form.key21">{{form.key21}}</text>
									<text v-else style="color: grey;">请选择日期</text>
								</TimeSelector>
							</view>
						</view>
						<view class="user-form-item">
							<view class="form-label">上次校验日期</view>
							<view class="form-input">
								<TimeSelector
									class="form-ipt"
								    showType="date"
									@btnConfirm="(e)=>dateChange(e,'key22')" 
								>
								    <text v-if="form.key22">{{form.key22}}</text>
									<text v-else style="color: grey;">请选择日期</text>
								</TimeSelector>
							</view>
						</view>
					</uni-collapse-item>
					<template v-for="(item,index) in tableLabels">
						<uni-collapse-item :title="item" class="inner-loop-table-collapse">
							<div class="user-form-item" :key="index">
								<div class="loop-form-table">
									<div class="loop-form-table-row">
									<template v-if="index === 0">
										<div class="text-center loop-form-table-item" >监测时间</div>
										<div class="text-center loop-form-table-item" >参比方法测定值<br>(mg/m3)</div>
										<div class="text-center loop-form-table-item" >CEMS测定值<br>(mg/m3)</div>
										<div class="text-center loop-form-table-item" >相对误差<br>绝对误差</div>
										<div class="text-center loop-form-table-item" >评价标准</div>
										<div class="text-center loop-form-table-item" >评价结果</div>
									</template>
									<template v-else-if="index === 1 || index === 2">
										<div class="text-center loop-form-table-item">监测时间</div>
										<div class="text-center loop-form-table-item">参比方法测量值<br>umol/mol<br>(mg/m3)</div>
										<div class="text-center loop-form-table-item">CEMS测量值<br>umol/mol<br>(mg/m3)</div>
										<div class="text-center loop-form-table-item">相对准确度<br>相对误差<br>绝对误差</div>
										<div class="text-center loop-form-table-item">评价标准</div>
										<div class="text-center loop-form-table-item">评价结果</div>
									</template>
									<template v-else-if="index === 3">
										<div class="text-center loop-form-table-item">监测时间</div><div class="text-center loop-form-table-item">参比方法测定值<br>(%)</div><div class="text-center loop-form-table-item">CEMS测定值<br>(%)</div>
										<div class="text-center loop-form-table-item">相对准确度<br>绝对误差</div><div class="text-center loop-form-table-item">评价标准</div><div class="text-center loop-form-table-item">评价结果</div>
									</template>
									<template v-else-if="index === 4">
									    <div class="text-center loop-form-table-item">监测时间</div><div class="text-center loop-form-table-item">参比方法测定值<br>(m/s)</div><div class="text-center loop-form-table-item">CEMS测定值<br>(m/s)</div>
									    <div class="text-center loop-form-table-item">相对误差<br>绝对误差</div><div class="text-center loop-form-table-item">评价标准</div><div class="text-center loop-form-table-item">评价结果</div>
									</template>
									<template v-else-if="index === 5">
									    <div class="text-center loop-form-table-item">监测时间</div><div class="text-center loop-form-table-item">参比方法测定值<br>(°C)</div><div class="text-center loop-form-table-item">CEMS测定值<br>(°C)</div>
									    <div class="text-center loop-form-table-item">绝对误差<br>°C</div><div class="text-center loop-form-table-item">评价标准</div><div class="text-center loop-form-table-item">评价结果</div>
									</template>
									<template v-else>
									    <div class="text-center loop-form-table-item">监测时间</div><div class="text-center loop-form-table-item">参比方法测定值<br>(%)</div><div class="text-center loop-form-table-item">CEMS测定值<br>(%)</div>
									    <div class="text-center loop-form-table-item">相对误差<br>绝对误差</div><div class="text-center loop-form-table-item">评价标准</div><div class="text-center loop-form-table-item">评价结果</div>
									</template>
								</div>
								<!-- 23 -->
								<template v-for="(item,idx) in 6">
								  <div v-if="idx==0" class="loop-form-table-row" :key="idx">
									<div class="text-center loop-form-table-item">
									  <TimeSelector
										class="form-ipt"
										 showType="dateToTime"
										@btnConfirm="(e)=>dateChange(e,'key'+(22 + 21*(index)+index*2+3*idx+1))" 
									  >
										  <text v-if="form['key'+(22 + 21*(index)+index*2+3*idx+1)]">{{form['key'+(22 + 21*(index)+index*2+3*idx+1)]}}</text>
										<text v-else style="color: grey;">请选择时间</text>
									  </TimeSelector>
									  <!-- {{ 22 + 21*(index)+index*2+3*idx+1 }} -->
									</div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+2)]" /></div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+3)]" /></div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+4 + idx)]" @blur="blur(22 + 21*(index)+index*2+3*idx+4 + idx)"/></div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+5 + idx)]"  /></div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+6 + idx)]"  /><!-- {{ 22 + 21*(index)+index*2+3*idx+6 + idx }} --></div>
								  </div>
								  <div v-else class="loop-form-table-row" :key="idx">
									<div class="text-center loop-form-table-item">
									  <TimeSelector
										class="form-ipt"
										showType="dateToTime"
										@btnConfirm="(e)=>dateChange(e,'key'+(22 + 21*(index)+index*2+3*idx+1+3))" 
									  >
										  <text v-if="form['key'+(22 + 21*(index)+index*2+3*idx+1+3)]">{{form['key'+(22 + 21*(index)+index*2+3*idx+1+3)]}}</text>
										<text v-else style="color: grey;">请选择时间</text>
									  </TimeSelector>
									  <!-- {{ 22 + 21*(index)+index*2+3*idx+1+3 }} -->
									</div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+2+3)]" /></div>
									<div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 + 21*(index)+index*2+3*idx+3+3)]" /></div>
									<div class="text-center loop-form-table-item"></div>
									<div class="text-center loop-form-table-item"></div>
									<div class="text-center loop-form-table-item"></div>
								  </div>
								</template>
								<div class="loop-form-table-row">
								  <div class="text-center loop-form-table-item">平均值</div>
								  <div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 +21*(index+1) + index*2 +1)]" /><!-- {{ 22 +21*(index+1) + index*2 +1 }} --></div>
								  <div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+(22 +21*(index+1) + index*2 +2)]" /><!-- {{ 22 +21*(index+1) + index*2 +2 }} --></div>
								  <div class="text-center loop-form-table-item"></div>
								  <div class="text-center loop-form-table-item"></div>
								  <div class="text-center loop-form-table-item"></div>
								</div>
							</div>
						</div>
						</uni-collapse-item>
					</template>
					<uni-collapse-item title="校验结论" class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">如校验合格前对系统进行过处理、调整、参数修改，请说明：</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key184"></div>
								</div>
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">如校验后，颗粒物测量仪、流速仪的原校正系统改动，请说明：</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key185"></div>
								</div>
								<div class="loop-form-table-row">
									<div class="loop-form-table-item">总体校验是否合格：</div>
									<div class="loop-form-table-item"><input class="form-input" v-model="form.key186"></div>
								</div>
							</div>
						</div>
						<view class="user-form-item"><view class="form-label">安装地点</view><view class="form-input"><input class="form-input" v-model="form.key19"></view></view>
						<view class="user-form-item"><view class="form-label">维护管理单位</view><view class="form-input"><input class="form-input" v-model="form.key20"></view></view>
						<view class="user-form-item">
							<view class="form-label">本次校验日期</view>
							<view class="form-input">
								<TimeSelector
									class="form-ipt"
								    showType="date"
									@btnConfirm="(e)=>dateChange(e,'key21')" 
								>
								    <text v-if="form.key21">{{form.key21}}</text>
									<text v-else style="color: grey;">请选择日期</text>
								</TimeSelector>
							</view>
						</view>
						<view class="user-form-item">
							<view class="form-label">上次校验日期</view>
							<view class="form-input">
								<TimeSelector
									class="form-ipt"
								    showType="date"
									@btnConfirm="(e)=>dateChange(e,'key22')" 
								>
								    <text v-if="form.key22">{{form.key22}}</text>
									<text v-else style="color: grey;">请选择日期</text>
								</TimeSelector>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item title="标准气体" class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<div class="loop-form-table-row">
									<div class="text-center loop-form-table-item" >标准气体名称</div>
									<div class="text-center loop-form-table-item" >浓度值</div>
									<div class="text-center loop-form-table-item" >生产厂商名称</div>
								</div>
								<template v-for="(v,i) in 4">
								<div class="loop-form-table-row" :key="i">
								  <div class="text-center loop-form-table-item" ><input class="form-input" v-model="form['key'+186+(i*3)+1]" /></div>
								  <div class="text-center loop-form-table-item" ><input class="form-input" v-model="form['key'+186+(i*3)+2]" /></div>
								  <div class="text-center loop-form-table-item" >
									<input class="form-input" v-model="form['key'+186+(i*3)+3]" />
									<!-- {{ 186+(i*3)+3 }} -->
								  </div>
								</div>
							  </template>
							</div>
						</div>
					</uni-collapse-item>
					<uni-collapse-item title="参比方法测试设备" class="inner-loop-table-collapse">
						<div class="user-form-item">
							<div class="loop-form-table">
								<div class="loop-form-table-row">
									<div class="text-center loop-form-table-item" >测试项目</div>
									<div class="text-center loop-form-table-item" >测试设备生产商</div>
									<div class="text-center loop-form-table-item" >测试设备型号</div>
									<div class="text-center loop-form-table-item" >方法依据</div>
								</div>
								<template v-for="(v,i) in 4">
								  <div class="loop-form-table-row">
								    <div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+198+(i*4)+1]" /></div>
								    <div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+198+(i*4)+2]" /></div>
								    <div class="text-center loop-form-table-item"><input class="form-input" v-model="form['key'+198+(i*4)+3]" /></div>
								    <div class="text-center loop-form-table-item">
								      <input class="form-input" v-model="form['key'+198+(i*4)+4]" />
								      <!-- {{ 198+(i*4)+4 }} -->
								    </div>
								  </div>
								</template>
							</div>
						</div>
					</uni-collapse-item>
				</uni-collapse>
				<view class="user-form-item">
					<view class="form-label">校验人员</view><view class="form-input"><input class="form-input" v-model="form.key215"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">(业主确认)</view><view class="form-input"><input class="form-input" v-model="form.key216"></view>
				</view>
				<view class="user-form-item">
					<view class="form-label">时间</view>
					<view class="form-input">
						<TimeSelector
							class="form-ipt"
						    showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'key217')" 
						>
						    <text v-if="form.key217">{{form.key217}}</text>
							<text v-else style="color: grey;">请选择时间</text>
						</TimeSelector>
					</view>
				</view>
				<!-- 上传 -->
				<view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传图片</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUpload ref="imgUpload" :list="imgList" :disabled="isDetail"/>
						</view>
					</view>
				</view>
				<!-- <view class="card" style="height: auto;margin-top: 20upx;">
					<view class="user-form-item" style="height: auto;">
						<view class="form-label">上传视频</view>
						<view class="form-input" style="height: auto;border: 0px;">
							<TmUploadVideo />
						</view>
					</view>
				</view> -->
			</view>
	</view>
</template>
<script>
	var  graceChecker = require("../../../common/graceChecker.js");
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import TmUpload from '@/components/tm-upload/tm-upload.vue'
	import TmUploadVideo from '@/components/tm-upload-video/tm-upload-video.vue'
	import LbPicker from '@/components/lb-picker'
	
	import {getDict} from "@/common/dict.js"
	
	export default {
		components: {
			uniIcons,uniPopup,uniNavBar,TimeSelector,TmUpload,TmUploadVideo,LbPicker
		},
		props:{
			obj: {
				type: Object,
				default: ()=>{}
			},
			isDetail: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				typeList: [],
				tableValue: [],
				resultList:[
					{value:'是',label:'是'},
					{value:'否',label:'否'},
				],
				tableLabels: [
					'颗粒物校验', 'SO2校验', 'NOx校验', 'O2校验', '流速校验', '烟温校验', '湿度校验'
				],
				unitList:[
					{id: 1,name: '单位一'},{id: 1,name: '单位二'},
				],
				form:{
					key1: '', key2:'', key3:'', key4:'', key5:'', key6:'', key7:'', key8:'', key9:'', key10:'', key11:'',
					        key12: '', key13:'', key14:'', key15:'', key16:'', key17:'', key18:'', key19:'', key20:'', key21:'',
					        key22: '', key23:'', key24:'', key25:'', key26:'', key27:'', key28:'', key29:'', key30:'', key31:'',
					        key32: '', key33:'', key34:'', key35:'', key36:'', key37:'', key38:'', key39:'', key40:'', key41:'',
					        key42: '', key43:'', key44:'', key45:'', key46:'', key47:'', key48:'', key49:'', key50:'', key51:'',
					        key52: '', key53:'', key54:'', key55: '', key56:'', key57:'', key58:'', key59:'', key60:'', key61:'', key62:'', key63:'', key64:'', key65:'', key66:'', key67:'', key68:'', key69:'', key70:'', key71:'', key72:'', key73:'', key74:'', key75:'', key76:'', key77:'', key78:'', key79:'', key80:'', key81:'', key82:'', key83:'', key84:'', key85:'', key86:'', key87:'', key88:'', key89:'', key90:'', key91:'', key92:'', key93:'', key94:'', key95:'', key96:'', key97:'', key98:'', key99:'', key100:'', key101:'', key102:'', key103:'', key104:'', key105:'', key106:'', key107:'', key108:'', key109:'', key110:'', key111:'', key112:'', key113:'', key114:'', key115:'', key116:'', key117:'', key118:'', key119:'', key120:'', key121:'', key122:'', key123:'', key124:'', key125:'', key126:'', key127:'', key128:'', key129:'', key130:'', key131:'', key132:'', key133:'', key134:'', key135:'', key136:'', key137:'', key138:'', key139:'', key140:'', key141:'', key142:'', key143:'', key144:'', key145:'', key146:'', key147:'', key148:'', key149:'', key150:'', key151:'', key152:'', key153:'', key154:'', key155:'', key156:'', key157:'', key158:'', key159:'', key160:'', key161:'', key162:'', key163:'', key164:'', key165:'', key166:'', key167:'', key168:'', key169:'', key170:'', key171:'', key172:'', key173:'', key174:'', key175:'', key176:'', key177:'', key178:'', key179:'', key180:'', key181:'', key182:'', key183:'', key184:'', key185:'', key186:'', key187:'', key188:'', key189:'', key190:'', key191:'', key192:'', key193:'', key194:'', key195:'', key196:'', key197:'', key198:'', key199:'', key200:'', key201:'', key202:'', key203:'', key204:'', key205:'', key206:'', key207:'', key208:'', key209:'', key210:'', key211:'', key212:'', key213:'', key214:'', key215:'', key216:'', key217:'', key218:'', key219:'', key220:'', key221:'', key222:'', key223:'', key224:'', key225:'', key226:'', key227:'', key228:'', key229:'', key230:'', key231:'', key232:'', key233:'', key234:'', key235:'', key236:'', key237:'', key238:'', key239:'', key240:'', key241:'', key242:'', key243:'', key244:'', key245:'', key246:'', key247:'', key248:'', key249:''
					        
				},
				imgList: [],
			}
		},
		mounted() {
			// 初始化字典
			this.typeList = getDict('e015')
			// console.log(this.typeList)
			// console.log(this.obj)
			// 默认值填充
			 this.form.key1 = this.obj.enterpriseName
			if(this.obj.formContent){
				this.form = JSON.parse((this.obj.formContent))
			}else if (this.obj.lastMaintenance) {
			    var lastMaintenance = JSON.parse(this.obj.lastMaintenance.formContent)
			    this.form.key1 = lastMaintenance.key1
			}
			if(this.obj.filePath){
				this.imgList =  JSON.parse((this.obj.filePath))
			}
		},
		onShow(){
			// console.log(this.form)
		},
		methods: {		
			dateChange(res,type){
				this.$set(this.form,type,res.key)
			},
			blur(num){
			      debugger
			        if(this.form['key'+(num+18)] != '' && this.form['key'+(num+19)] != ''){
			              this.form['key'+num] = (this.form['key'+(num+19)]-this.form['key'+(num+18)]) / this.form['key'+(num+18)]*100 + '%'
			        }
			    },
			getFormData(){
				return {
					formContent: JSON.stringify(this.form),
					filePath: JSON.stringify(this.$refs.imgUpload ? this.$refs.imgUpload.getPaths() : []),
				}
			},
			toggle(){
				this.$refs.popup.open()
			},
		}
	}
</script>

<style lang="scss" scoped>
.popup-content {
	background-color: #fff;
	padding: 15px;
}

</style>
